<template>
<div class="productType">
  <el-button type="primary" icon="el-icon-finished" @click="addType">类型新增</el-button>
  <el-button type="danger" icon="el-icon-close">删除</el-button>
  <el-table
    :data="tableData"
    style="width: 100%"
    class="tableList"
    border
    :header-cell-style="{ background: '#F0FAFF', color: '#787878' }"
    :row-class-name="tableRowClassName"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
      align="center"
    >
    </el-table-column>
    <el-table-column
      prop="_id"
      label="_id"
      width="280"
      align="center">
    </el-table-column>
    <el-table-column
      prop="name"
      label="类型名称"
      width="180"
      align="center">
    </el-table-column>
    <el-table-column
      prop="user"
      label="操作人"
      align="center">
    </el-table-column>
    <el-table-column

      label="操作"
      align="center">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
    title=新增类型
    :visible.sync="dialogVisible"
    width="30%"
    align="center">
    <el-form :model="digFrom" :rules="rules" ref="digFrom" label-width="100px" class="demo-ruleForm">
      <el-form-item
        label="类型名称"
        prop="name"
      >
        <el-input v-model="digFrom.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addput('digFrom')">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import { ajax } from '@/config/user'

export default {
name: "productType",

  data(){
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入类型名称'));
        return
      }
      callback()
    };
  return{
    tableData: null,
    dialogVisible: false,
    digFrom:{
      name:null,
      user:null,
    },
    getType: {
      type: null,
      password: null,
      pageSize: 10,
      pageNum: 1,
      user: null
    },
    rules: {
      name: [
        { validator: validatePass, trigger: 'blur',required:true }
      ],
    }
  }
  },
  mounted () {
  this.serachType()
  },
  methods:{
    serachType(){
    ajax.postserarchType(this.getType).then(res=>{
      var {data,code,msg}=res.data
      if (code==200){
        this.$message.success(msg)
        console.log(data)
        this.tableData=data
      }else {
        this.$message.warning('请求出错')
      }
    })
    },
    addput(formName){
      this.$refs[formName].validate((valid) => {
        if (valid && this.digFrom.name!=null){
          this.dialogVisible=false
          this.digFrom.user=sessionStorage.getItem('username')
          ajax.postAddproductType(this.digFrom).then(res=>{
            var {data}=res
            console.log(data)
            if (data.code==200){
              this.$message.success(data.msg)
              this.digFrom.name=null
              this.dialogVisible=false
            }else {
              this.$message.warning(data.msg)
              this.digFrom.name=null
            }
          })
        }else {
          this.$message.warning('检查是否输入正确')
        }

      })
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(val)
    },
    //类型新增窗口
    addType(){
      this.dialogVisible=true
      this.digtitle='类型新增'
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
}
</script>

<style scoped lang="scss">
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.tableList{
  margin-top: 20px;
}
</style>
